Top 18 Beautiful And Inspiring CSS Sidebar Menu Set

1. Easy Menu Manager

featured image

Easy Menu Manager is an AJAX /PHP powered menu management system. You can add, edit, delete, and reorder menu items easily using this application.Multi-level menu

Menu items can be grouped, so you can show different menus in one page, for example: top menu, sidebar menu, footer menu, member menu

Add, edit, and delete menu items easily using ajax.Drag and CSS vertical drop menu items to change their order (also works in nested menu)

Generate nested lists menu structure

CSS3 styles for displaying dropdown menu (horizontal & vertical)

It can also be used to replace the menu in your static website, but it may not work if included inside a complex framework/CMS. Added alternative script for displaying menu

More Details

2. Apycom jQuery Menus

Apycom jQuery Menus

Full cross-browser compatibility, Fully accessible even when javascript is turned off, as a pure css menu, Search engines optimized, Clear unordered list (LI and UL HTML tags) structure, Easy to setup and update, Fantastic animation and transition effects, Multiple pre-desinded color schemes, Completely customizable styling with CSS, Powered by jQuery,

Extremely small - 3kb uncompressed

More Details

3. jElevator jQuery Inter-Page Navigation Tool

featured image

Providing users with scroll-to-top, scroll-to-bottom, and sections menu functionality, jElevator will increase the usability of any page it is added to. As the user’s cursor approaches the left side of the page, a narrow menu will slide into view. This menu may consist of a scroll-to-top button, a scroll-to-bottom button, and/or a sections menu button. The sections menu button will open a secondary pane consisting of a set of links which are generated by the script automatically. Clicking a link within the sections menu pane will scroll the user to the section of the page associated with that link. See the demo for an example that constructs a sections menu from H1, H2, H3, and H4 elements.Auto-Hide Menu

Automatic Sections Menu

More Details

4. Universal Responsive Mega Menu

featured image

This menu is the result of a combination of my best works on Codecanyon : I’ve put together a flexible mega menu system that can hold 12 sizes of drop downs, unlimited fly-out elements combined with a jQuery script to enhance the whole system. It can be used as a simple CSS slideshow (with mega “drop-ups”) using the exact same markup as the “standard” mega menu. Customizing the menu require some basic knowledge of CSS and you can change the look of every part of the menu : the fonts, the colors, the sizes, etc. Fully Responsive Menu

Standard Top Menu

Sticky (or fixed) Top Menu

The package contains 2 folders : “Responsive” and “Non-Responsive” so the menu is ready to be included on any type of website. For each version of the menu, responsive and non-responsive, you have 6 HTML files with various examples of what you can do with the menu, from a simple navigation bar without drop downs to a combination of 2 mega menus on a same page. This menu has been tested on many devices and browsers to ensure a maximum compatibility : Internet Explorer, Firefox, Chrome, Opera, Safari have successfully passed the tests.The whole menu relies mainly on CSS, it means that if Javascript is disabled, most of the menu will work. Be sure to test the demo with different browsers or devices to make sure that the menu meets your requirements. You’ll need to be logged in to be able to access the contact form wordpress (in the sidebar).I try to regularly update my products based on the feedback I receive, so if you find any kind of bug, I’ll do my best to update the menu as soon as possible. I’ve also created a website that compares and filters my different menus by options / features, Mega-Menu. If you’re still not sure about the menu that would fit into your project, you can contact me at any time from my profile page.

More Details

5. CharBar - Sidebar Navigation

featured image

CharBar – Sidebar Navigation

CharBar is a Navigation Sidebar where you can use one letter or an image as link.

More Details

6. UberMenu - WordPress Mega Menu Plugin

featured image

UberMenu is a user-friendly, highly customizable, responsive Mega Menu WordPress plugin. It works out of the box with the simple dropdown menu Menu System, making it simple to get started but powerful enough to create highly customized and creative mega menu configurations.Enhanced CSS

Works out of the box with most WordPress 3 Menu-Enabled Themes

Integrates directly with the wordpress 3 custom menu Menu Management System – work with the system that you know and love!

Easily customize colors and font sizes through the UberMenu Style Generator, or create your own CSS styles

Use the menu with or without jQuery Enhancements

Add an Image to any Menu Item through the Featured Image interface

Add Descriptions to any Menu Item at any level

Support for pure CSS dropdown menu (non-jQuery) menus

Ability to create image-only menu items (no text)

Menu is fully widgetized with unlimited widget areas!

Drag and drop Widgets into the sidebar menu widget wp areas with ease

Menu styles are CSS-driven

Use of the dropdown menu CSS Menu System

A Theme that properly implements the WordPress 3 Menu System, using the wp_nav_menu() function with the theme_location parameter.UberMenu will not automatically adopt the style of your theme’s menu. You can change the menu that appears on an individual Page or Post using the Menu Swapper plugin.* Added first menu item hover border radius for style generator

* CSS Tweaks

* Fixed CSS issue with responsive menu plugin bars button

css into LESS stylesheets for easier customization

* Added mobile menu interface to all iOS devices (easier closing of menu)

* Improved responsive theme handling to avoid duplicating mega menu

* Various CSS enhancements

* Ability to center menu items within jQuery slideshow menu

* Various CSS and JS refinements

* Revised menu item options to use a single variable (increases menu item limit imposed by PHP)

* Enhancement: easy centering of menu bar

com/wordpress-plugins/responsive-wordpress-mega-menu

* wp-uber-menu.* wp-uber-menu-admin.* Menu thumbnail SSL support

* Top level widget capabilty - add a search box widget to your menu bar!

* Auto Align second-level menu items option

* Support for simple CSS dropdown menu (non-jQuery) menus

* Support for image-only menu items (no text)

There were a variety of changes, so if you are upgrading, be sure to back up your old wp-uber-menu folder before installing the new version

* "Disappearing sidebar" effect that occurs with themes that don't specify a sidebar index/ID

2 makes the Menu Item Image support more robust. Depending on how the relevant theme is implemented, in certain cases it can keep the plugin from enabling featured images on menu items and vice versa.css file if you've made style customizations!

More Details

7. Metro Style CSS3 Menu

featured image

Metro Style CSS3 Menu

A Pure HTML5/CCS3 Metro Style Navigation Menu that fits well with any website or webpage. There are many key features which make this menu look extremely simplistic, yet very complex.Only two main files needed, a CSS file and an HTML file. There are only two changes to be made to change the colour scheme within the CSS file.

More Details

8. DeliMenu - CSS3 Menu with User based Features

featured image

DeliMenu is a pure HTML and wordpress CSS mega menu created to be simple in its design and powerful in its capabilities. DeliMenu, in addition to long link-lists, detailed description and design menus, tied notification indicators and bubbles, and its unique menu designs, it comes with a user-specific drop down that includes user details and login form.Custom User Menu with login form

Right or jQuery slideshow menu justification

Valid HTML / CSS

The browser compatibility is listed in the sidebar.

More Details

9. Long Shadow Menu

featured image

Shady is a Responsive, flat long shadow CSS menu.

More Details

10. Elusive CSS3 Mega Menu

featured image

Elusive CSS3 Mega Menu

A Pure HTML5/CCS3 Mega CSS center navigation menu that fits well with any website or webpage. There are many key features which make this menu look extremely simplistic, yet very complex.Only two main files needed, a CSS file and an HTML file. There are only two changes to be made to change the colour scheme within the CSS file.

More Details

11. MashMenu - Wordpress Easy Mega Menu Plugin

featured image

With this plugin, your site has a beautiful menu designed by Mashable with a flexible customization ability. Add: option to remove custom CSS

Add sidebar & widgets to menu

2 sub-menu style (Preview mode & ItemList mode)

More Details

12. Argus - Mega Menu

featured image

This is pure HTML5/CSS3 menu. Menu has HTML5 structure and works on all major browsers. Menu is easy to edit and integrate into any website. On mobile and tablet devices, only the first level of the classic drop-down menu is visible. Menu also comes in two variants (Centered and Full Width). Menu works (the main structure is 100% same) on CSS3 menu bar 9, 8, 7… and a lot of old browsers but animation and some other CSS3 features do not work.All images used in the preview are just for demonstration purposes and not included in the Menu.

More Details

13. Lynx - Responsive Menu

featured image

Lynx is a menu component based in CSS and Javascript code.Javascript/CSS effects

More Details

14. Sherpa | Complete Navigation System

featured image

Mega Menu and CSS3 horizontal drop menu now use the hoverintent plugin for better usability.Sherpa brings together the three main navigation elements of every interface – Navbar, Sidebar and Sticky Footer.Each one consists of a selection of different menu types including: Slide Menu, Mega Menu, Accordion Menu and Drop Menu.Slide Menu

Accordion Menu

Mega Menu

Drop Menu

Built using established menu building techniques

Works as pure CSS drop menu nav also (everything works except animated toggling)

Fixed some CSS bugs

More Details

15. Pull-Out Content Panel

featured image

The custom scrollbars packed in this menu will automatically appear when needed and if you need to add even more content, you can use the infinite carousel to scroll between each part of the panel. This menu has been tested on many devices and browsers to ensure a maximum compatibility : Internet Explorer, Firefox, Chrome, Opera, Safari have successfully passed the tests. You’ll need to be logged in to be able to access the jQuery contact form wordpress (in the sidebar).

More Details

16. Metro - CSS3 Mega Menu

featured image

This is a CSS3 menu horizontal inspired in the new Microsoft Metro UI. Sidebar Layout

Cleaned the CSS code.

More Details

17. niceMenu - Wordpress Plugin

featured image

A new way to slide between multiple level huge menu. Just a few clicks & the menu is installed on your wordpress website. It’s easy to position anywhere, as a widget sidebar.

More Details

18. Verion - Widget Accordion Sidebar CSS

featured image

Verion – Widget Accordion SideBar CSS

Verion – Widget Accordion SideBar CSS is a small CSS plugin that is used to create the menu vertical sidebar wordpress to contain web widgets like: accordion menu, login form, small photo, buttons, recent/feature posts, social sharing icons, etc.CSS animation effects.If you like to see the plugin documentation you can check it here: Verion CSS Documentation

Navion – Metro Navigation Menu Accordion Switcher CSS

TileBox – Modern Responsive LightBox CSS

Tabion – Metro Tab Accordion Switcher CSS

OneMenu – Responsive Metro UI Menu

MenuStation – Unlimited Responsive Menu

Metro Navigation Bar CSS

More Details

19. Sherpa | Complete Navigation System (CSS Edition)

featured image

Sherpa brings together the three main navigation elements of every interface – Navbar, Sidebar and Sticky Footer.Each one consists of a selection of different menu types including: Slide Menu, Mega Menu, Accordion Menu (in sidebar) and Drop Menu.Slide Menu

Accordion vertical menu CSS

Mega Menu

Drop Menu

Built using established menu building techniques

More Details